<!DOCTYPE html>

<html lang = "en" >
<head>
    <title> ACT - Schedule </title>

    <script type = "text/javascript" src = "../../js/general/nav.js" >
    </script>

    <script type = "text/javascript" src = "../../js/set_cookie.js" >
    </script>

    <link rel = 'shortcut icon' href = '../../repository/favicon.ico'>
    <link rel = 'stylesheet' type = 'text/css' href = '../../css/general.css' >
    <link rel = 'stylesheet' type = 'text/css' href = '../../css/schedule/general.css' >
</head>

<body> 
    <script type = "text/javascript">
        nav ( 4 ) ;
        set_cookie ( 'en' ) ;
    </script>

    <div class = "big-countdown" > 
        <div id = "c-title" > 
            <h2> 
                Next ACT Test: 
            </h2>

            <p id = "number" >
            </p>
        </div>

        <div class = "countdown" >
            <div class = "month" >
                <h4> Month </h4>

                <p id = "month" > </p>
            </div>

            <div class = "day" >
                <h4> Day </h4>

                <p id = "day" > </p>
            </div>

            <div class = "hour" >
                <h4> Hour </h4>

                <p id = "hour" > </p>
            </div>

            <div class = "minute" >
                <h4> Minute </h4>

                <p id = "minute" > </p>
            </div>

            <div class = "second" >
                <h4> Second </h4>

                <p id = "second" > </p>
            </div>
        </div>
    </div>

    <script type = "text/javascript" src = "../../js/schedule/countdown.js" >
    </script>

    <script type = "text/javascript" >
        window.onload = function ()
        {
            setInterval ( 'countdownact ()' , 1000 );
        }
    </script>

    <div align = "middle" class = "table" >
        <table id = "status" align = "middle" >
        </table>
    </div>
    
    <script type = "text/javascript" src = "../../js/schedule/act.js" > 
    </script>
</body>

<footer>
    <script type = "text/javascript" src = "../../js/general/foot.js" >
    </script>

    <p id = "foot"> Language: </p>

    <select onchange = 'location.href = this.options [ this.selectedIndex ].value' id = "lang" >
        <option value = "" selected = "selected" > English </option>
        <option value = "../../zh-cn/schedule/act.html" > 中文简体 </option>
        <option value = "../../zh-jyut/schedule/act" > 中文繁體(中國香港及澳門) </option>
        <option value = "../../zh-fan/schedule/act" > 中文繁體(中國臺灣) </option>  
    </select> 

    <script type = "text/javascript" src = "../../js/general/mobile.js" >
    </script>

    <script type = "text/javascript" >
        if ( window.screen.width < 500 )
        {
            h2_class = document.getElementById ( "c-title" ).getElementsByTagName ( "h2" ) ;
            p_class = document.getElementById ( "c-title" ).getElementsByTagName ( "p" ) ;

            h2_class [ 0 ].style.fontSize = "70pt" ;
            p_class [ 0 ].style.fontSize = "70pt" ;

            var div_class = document.querySelector ( ".countdown" ).getElementsByTagName ( "div" ) ;
            var h4_class = document.querySelector ( ".countdown" ).getElementsByTagName ( "h4" ) ;
            var p_class = document.querySelector ( ".countdown" ).getElementsByTagName ( "p" ) ;

            for ( var i = 0 ; i < div_class.length ; i++ )
            {
                div_class [ i ].style.display = "grid" ;
                h4_class [ i ].style.fontSize = "90pt" ;
                p_class [ i ].style.fontSize = "80pt" ;
            }

            var th_class = document.getElementById ( "first-line" ).getElementsByTagName ( "th" ) ;

            for ( var i = 0 ; i < th_class.length ; i++ )
            {
                th_class [ i ].style.fontSize = "50pt" ;
            }

            var table = document.querySelector ( ".table" ) ;
            table.style.overflow = "scroll" ;
        }
    </script>
</footer>

</html>